<style scoped lang="less">
@import './css/dashboard.css';
.padding10 {
  padding: 0 10px 10px 0;
}
.oneContain {
  width: 380px;
  float: left;
  padding: 0 10px 10px 0;
}
.typeItemContain:hover {
  background: #f6f6f6;
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.47);
}
.typeItemContain {
  width: 186px;
  float: left;
  border: solid 1px #d7d7d7;
  border-radius: 4px;
  margin-bottom: 10px;
  margin-right: 10px;
  /*cursor: pointer;*/
}

</style>
<template>
  <Row>
    <!-- 设备统计信息 -->
    <Card style="margin-bottom:16px;">
      <p slot="title"> 设备/报警情况汇总 </p>
      <Row>
        <!--  :gutter="16"<Col span="4"></Col> -->
        <div class="typeItemContain" v-for="item in statisticData" :key="item.type" @click="parentClick(item)">
          <div style="font-size:16px;color:grey;padding:16px 0 0 20px;"> {{item.type}} </div>
          <div style="text-align:center;"> <span style="font-size:24px;">{{numberShow(item.device)}}</span> </div>
          <div style="display:flex;text-align:center;">
            <div style="flex:1;">
              <div style="color:grey;">
                <Icon type="ios-radio-button-on" color="green" size="12" />在线</div> <span style="font-size:14px;">{{numberShow(item.online)}}</span> </div>
            <div style="flex:1;">
              <div style="color:grey;">
                <Icon type="ios-radio-button-on" color="orange" size="12" />停用</div> <span style="font-size:14px;">{{numberShow(item.stop)}}</span> </div>
          </div>
          <div style="border-top:1px solid #e9eaec;color:grey;padding:10px;"> 今日报警次数：{{item.warning}} </div>
        </div>
      </Row>
      <!-- 子数据 -->
      <Row v-show="childrenItemShow" style="border-top:1px solid #eee;">
        <div>{{parentItemType}}</div>
        <div class="typeItemContain" v-for="item in childrenData" :key="'c'+item.type">
          <div style="font-size:14px;padding:16px 0 0 20px;"> {{item.type}} </div>
          <div style="text-align:center;"> <span style="font-size:20px;">{{numberShow(item.device)}}</span> </div>
          <div style="display:flex;text-align:center;">
            <div style="flex:1;">
              <div style="color:grey;">
                <Icon type="ios-radio-button-on" color="green" size="12"></Icon> &nbsp;&nbsp;在线 </div> <span style="font-size:12px;">{{numberShow(item.online)}}</span> </div>
            <div style="flex:1;">
              <div style="color:grey;">
                <Icon type="ios-radio-button-on" color="orange" size="12"></Icon> &nbsp;&nbsp;停用 </div> <span style="font-size:12px;">{{numberShow(item.stop)}}</span> </div>
          </div>
          <div style="border-top:1px solid #e9eaec;color:grey;padding:10px;"> 今日报警次数：{{item.warning}} </div>
        </div>
      </Row>
    </Card>
    <!-- 我的关注 -->
    <Card>
      <p slot="title"> 我的关注 </p>
      <!--视频显示？start-->
      <!--<Row :gutter="16" style="margin-bottom:16px;">-->
      <!--&lt;!&ndash; Col span="6" &ndash;&gt;-->
      <!--<Col span="6" v-for="(item,index) in cameraData" :key="item.text + index" style="margin-bottom:6px;margin-right:6px;width:350px;height:224px;float:left;">-->
      <!--<div class="typeItemContain" :id="'idCamera'+index" draggable="true" @dragstart="drag($event)" @drop="drop($event)" @dragover="allowDrop($event)">-->
      <!--<div style="overflow:hidden;height:180px;text-align:center;"> <img :src="item.src" alt="" style="height:180px;" :id="'idCameraImg'+index"> </div>-->
      <!--<div style="border-top:1px solid #e9eaec;color:grey;padding:10px 20px;" :id="'idCameraText'+index"> {{item.text}} <span style="float:right;cursor:pointer;" @click="follow(index)">-->
      <!--<Icon type="android-star" v-show="item.follow"></Icon>-->
      <!--<Icon type="android-star-outline"  v-show="!item.follow"></Icon>-->
      <!--</span> </div>-->
      <!--</div>-->
      <!--</Col>-->
      <!--</Row>-->
      <!--视频显示？end-->
      <Row>
        <!-- <Col span="8" v-for="da in followDatas" :key="da.text" class="padding10">
        <DataCard :card-data="da"></DataCard>
        </Col> -->
        <div class="oneContain" v-for="da in followDatas" :key="da.text">
          <!--组件化-->
          <DataCard :card-data="da"></DataCard>
        </div>
      </Row>
    </Card>
  </Row>
</template>
<script src="./js/dashboard.js"></script>
